<!-- 工作巡查主页面 -->
<template>
  <el-container>
    <el-main class="container bc-table">
      <el-table
        :data="tableData"
        @row-click="rowClick"
        style="width: 100%; height: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column v-if="isMulti" type="selection" width="55" />
        <el-table-column
          :show-overflow-tooltip="true"
          v-for="(item, index) in trData"
          :key="index"
          :width="item.width"
          :prop="item.prop"
          :label="item.label"
        />
        <slot name="caozuo"></slot>
      </el-table>
    </el-main>
    <el-footer class="footer mt20" v-if="false">
      <el-pagination
        :page-sizes="[10, 20, 30, 50, 100]"
        :background="true"
        prev-text="上一页"
        next-text="下一页"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total,sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-footer>
  </el-container>
</template>

<script setup>
const props = defineProps({
  // 当前页数
  // currentPage: Number,
  // 每页行数
  // pageSize: Number,
  // 总条数
  total: Number,
  trData: [],
  bgColor: String,
  height: String,
  /**
   * 是否包含停用用户，默认为false
   */
  tableData: Array,

  /**
   *是否显示分页
   */
  pagination: Boolean,
  // 是够多选
  isMulti: Boolean,
});
const state = reactive({
  row: {},
});
let currentPage = ref(1)
let pageSize = ref(10)
const handleCurrentChange = (val) => {
  currentPage.value = val;
  emit("handleCurrentChange", val);
};
const handleSizeChange = (val) => {
  pageSize.value = val;
  emit("handleSizeChange", val);
};
const tableHeaderColor = () => {
  return {
    background: "rgba(14, 108, 255,0.08)",
    lineHeight: "19px",
    fontSize: "14px",
    color: "#58627B",
  };
};
const getRowClass = (row, index) => {
  // return { border: "#000000 3px solid;" };
  return state.row.xh === row.row.xh ? "background: #000" : "";
};
const emit = defineEmits([
  "rowClick",
  "handleSelectionChange",
  "handleCurrentChange",
]);

const rowClick = (row, column, event) => {
  state.row = row;
  emit("rowClick", row);
};
const handleSelectionChange = (val) => {
  emit("handleSelectionChange", val);
};

onMounted(() => {});
</script>

<style scoped>
.tableSty {
  width: 100%;
  height: 100%;
}
.el-main {
  padding: 0 !important;
}
</style>
